<template>
  <div class="home">
    <div class="container">
      <!--案场首页待办-->
      <home-task
        ref="homeTask"
        v-if="unlocking('0305000000') || unlocking('0306000000') || unlocking('0307000000')"></home-task>
      <!--广告位-->
      <adv-page
        ref="advPage"
        :orgId="orgInfo.orgCompanyId || orgInfo.orgDivisionId"
        v-if="unlocking('0308000000')"></adv-page>
      <div class="flex tab-content">
        <!--组织切换-->
        <div class="org-content flex flex-vertical-center">
          <div style="width: 100%" class="org">
            <dt-info :options="orgOptions" :info="orgInfo"></dt-info>
          </div>
        </div>
        <!--顶部条件-->
        <div class="flex tab-top flex-vertical-center flex-horizontal-between">
          <date-search ref="dateSearch" @oncheckDate="dateChooseClick"></date-search>
          <div style="margin-left: 20px" v-if="checkIndex != null">{{ dateFormat }}</div>
          <Button type="primary" v-if="unlocking('0311000000')" @click="goDashboard">打开数据看板</Button>
        </div>
      </div>
      <div class="case-warp">
        <div class="case-content">
          <!--案场概况-->
          <div class="case-survey">
            <div class="flex survey-content flex-horizontal-between">
              <!--来人统计-->
              <visitor-page ref="visitorPage" v-if="unlocking('0301000000')"></visitor-page>
              <!--线索统计-->
              <clue-page ref="cluePage" v-if="unlocking('0302000000')"></clue-page>
            </div>
          </div>
          <!--销售统计-->
          <sale-statistics ref="saleStatistics" v-if="unlocking('0303000000')"></sale-statistics>
          <!--SOP-->
          <sop-page ref="sopPage" v-if="unlocking('0304000000')"></sop-page>
        </div>
      </div>
    </div>
    <dt-loading :loading="loading" />
  </div>
</template>
<script>
  import homeMgr from '@/biz/buildingHome/home'
  import { linkPage } from '@/biz/buildingHome/linkPage'
  import moment from 'moment'
  import saleStatistics from '@/views/casemanagement/buildingHome/statistics/saleStatistics.vue'
  import dt from '@dt/dt'
  import homeTask from '@/views/casemanagement/buildingHome/statistics/homeTask.vue'
  import advPage from '@/views/casemanagement/buildingHome/statistics/advPage.vue'
  import visitorPage from '@/views/casemanagement/buildingHome/statistics/visitorPage.vue'
  import cluePage from '@/views/casemanagement/buildingHome/statistics/cluePage.vue'
  import sopPage from './sopPage.vue'
  import dateSearch from '@/views/casemanagement/buildingHome/statistics/dateSearch.vue'
  import orgOpt from './orgConfig'
  import workMgr from '@/biz/work/index'
  export default {
    mixins: [linkPage],
    data() {
      return {
        orgInfo: {
          title: '',
          orgId: [],
          buildingId: '', // 案场ID
          orgCompanyId: '', // 分公司ID
          orgDivisionId: '', //事业部ID
          orgOfficeId: '', //事业处ID
          level: 1
        },
        orgOptions: [],
        checkIndex: 1,
        chooseTime: {},
        dataText: '今日',
        loading: false
      }
    },
    components: {
      saleStatistics,
      homeTask,
      advPage,
      visitorPage,
      cluePage,
      sopPage,
      dateSearch
    },
    computed: {
      dateFormat() {
        let date = ''
        if (this.chooseTime.startTime == this.chooseTime.endTime) {
          date = moment(this.chooseTime.startTime).format('YYYY-MM-DD')
        } else {
          date = `${moment(this.chooseTime.startTime).format('YYYY-MM-DD')} 至 ${moment(
            this.chooseTime.endTime
          ).format('YYYY-MM-DD')}`
        }
        return date
      }
    },
    activated() {
      let orgCheck = JSON.parse(window.localStorage.getItem(this.$dt.userInfo().currentRoleId))
      if (orgCheck) {
        this.orgInfo = orgCheck
      }
      if (this.orgInfo.orgId.length) {
        this.homeDataInit()
      }
    },
    methods: {
      // 首页数据初始化
      homeDataInit() {
        //关联线索提示
        this.$nextTick(function () {
          // 广告位
          this.$refs.advPage && this.$refs.advPage.getAdvListByOnShelf()
          // 案场首页待办
          this.$refs.homeTask && this.$refs.homeTask.getTaskHeadInfoForWeb()
          // 统计信息
          this.getWorkInfo()
        })
      },
      getWorkInfo() {
        this.loading = true
        let params = {
          orgId: this.orgInfo.orgId[this.orgInfo.orgId.length - 1],
          startTime: this.chooseTime.startTime,
          endTime: this.chooseTime.endTime,
          level: this.orgInfo.level
        }

        let checkParams = {
          startTime: this.chooseTime.startTime,
          endTime: this.chooseTime.endTime,
          checkIndex: this.checkIndex,
          orgId: this.orgInfo.orgId[this.orgInfo.orgId.length - 1],
          level: this.orgInfo.level
        }
        workMgr
          .getOrgDailyPaperMerge(params)
          .then((res) => {
            this.loading = false
            // 来人统计
            this.$refs.visitorPage && this.$refs.visitorPage.dataInit(checkParams, this.dataText, res)
            // 线索统计
            this.$refs.cluePage && this.$refs.cluePage.dataInit(checkParams, this.dataText, res)
            // 销售统计
            this.$refs.saleStatistics && this.$refs.saleStatistics.getSalesData(checkParams, res)
          })
          .catch((err) => {
            this.loading = false
          })
      },
      initSopFun() {
        // SOP
        // 缓存所选组织
        window.localStorage.setItem(this.$dt.userInfo().currentRoleId, JSON.stringify(this.orgInfo))
        this.$refs.sopPage && this.$refs.sopPage.initData(this.orgInfo)
      },
      // 切换日期
      dateChooseClick(checkIndex, chooseTime, dataText) {
        this.checkIndex = checkIndex
        this.dataText = dataText
        this.chooseTime = chooseTime
        this.homeDataInit()
      },
      goDashboard() {
        let params = {
          sourceType: 'web',
          orgId: this.orgInfo.orgCompanyId || this.orgInfo.orgDivisionId
        }
        workMgr.getEmbeddedUrl(params).then((res) => {
          if (res) {
            window.open(res, 'kanban', '_blank')
          }
        })
      }
    },
    created() {},
    mounted() {
      this.$refs.dateSearch.initDateFun(1)
      this.orgOptions = orgOpt.options(this)
    }
  }
</script>
<style lang="scss" scoped>
  .home {
    overflow-y: auto;
    font-size: 16px;
    background-color: #f0f2f5;

    ::v-deep .ivu-tooltip-content {
      width: 350px;
    }
    ::v-deep .org .ivu-form-item-content {
      margin-left: 0px !important;
    }
    ::v-deep .org .ivu-form-item {
      margin-bottom: 0px !important;
    }
    ::v-deep .org .ivu-input {
      height: 50px !important;
      font-size: 16px !important;
      border: 0px !important;
    }
    ::v-deep .org .ivu-cascader-arrow {
      font-size: 16px !important;
    }

    .container {
      position: relative;
      overflow: hidden;
      margin: 1.2%;
      .title {
        padding-left: 8px;
        color: #222;
        font-size: 18px;
        border-left: 2px solid #2298ff;
        font-weight: bolder;
      }

      .tab-content {
        position: absolute;
        z-index: 10;
        width: 100%;
        background-color: #f0f2f5;
        .org-content {
          padding-right: 10px;
          width: 20%;
          border-radius: 5px;
        }
        .tab-top {
          padding: 0px 15px;
          background-color: #fff;
          border-radius: 5px;
          width: 80%;
        }
      }

      .case-warp {
        padding-top: 50px;
        height: calc(100vh - 70px);
        overflow-y: auto;
      }

      .case-content {
        margin-top: 1.2%;
      }

      .daily_btn {
        margin-top: 1.2%;
        display: flex;
        justify-content: space-between;
        background-color: #fff;
        padding: 20px 15px;
        line-height: 32px;
      }

      .case-survey {
        margin-top: 1.2%;

        .tips {
          padding: 5px 10px;
          font-size: 14px;
          background: #fefcee;
          border-radius: 5px;

          .ivu-icon {
            margin-right: 10px;
            color: #2298ff;
            font-size: 18px;
          }

          .link-btn {
            margin-left: 10px;
            cursor: pointer;
            color: #2298ff;
          }
        }
      }

      .sop-task {
        margin-top: 1.2%;
        padding: 20px 15px;
        background-color: #fff;
        border-radius: 5px;

        .tips {
          font-size: 12px;
          margin: 10px 0;
          background-color: #fffbe6;
          width: 30%;
          border-radius: 5px;

          p {
            font-size: 14px;
            line-height: 32px;
          }
        }

        .sop-tab {
          margin-top: 15px;

          ::v-deep .ivu-tabs-nav .ivu-tabs-tab-active {
            font-weight: 600;
            color: #0088ff;
            border-bottom: 3px solid #0088ff;
          }

          ::v-deep .ivu-tabs-nav .ivu-tabs-tab:hover {
            color: #0088ff;
          }

          ::v-deep .ivu-tabs-bar {
            margin-bottom: 0;
          }
        }
      }
    }

    .home-img {
      width: 600px;
      left: 50%;
      top: 120px;
      transform: translateX(-50%);
    }

    .alarm {
      color: #ed5134;
    }
  }
</style>
